<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2023-02-01 09:59:27
 * @LastEditTime: 2023-03-06 13:34:17
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\page\auth\role.vue
-->
<template>
  <div class="role">
    <ul class="header-buttons">
      <li>
        <z-button title="刷新" icon="refresh" color="#40485b" @click="pageQuery"> </z-button>
        <z-button icon="add" @click="onAdd" v-if="purview(2)">新增</z-button>
        <z-button icon="delete" type="danger" :disabled="!table.selection.length" @click="onDel(table.selection.map(r => r.id))" v-if="purview(4)">
          删除
        </z-button>
      </li>
      <li class="dis-flex">
        <el-button>
          <el-icon> <IEpGrid /> </el-icon>
        </el-button>
      </li>
    </ul>
    <el-table :data="table.data" border stripe @selection-change="onTableChange">
      <el-table-column type="selection" align="center" width="55" />
      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column v-for="col in table.columns.sort((l, r) => l.sort - r.sort)" :prop="col.id" :key="col.id" :label="col.label" align="center">
        <template #default="scope">
          <template v-if="col.id === 'operate'">
            <z-button icon="xiugai" size="small" title="编辑" @click="onEdit(scope.row)" v-if="purview(3)"></z-button>
            <z-button icon="delete" type="danger" size="small" title="删除" @click="onDel([scope.row.id])" v-if="purview(4)"></z-button>
          </template>
          <template v-else>
            {{ scope.row[col.id] }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <roleEdit v-model="status.show" :editData="status.editData" @onSave="onSaveCallback" />
  </div>
</template>
<script setup>
import { post } from '@/api/index';
import roleEdit from './components/roleEdit.vue';
let { purview } = inject('$global');
let $message = inject('$message');
let day = inject('$day');
let store = useStore();
let table = reactive({
  columns: [
    { label: '名称', id: 'roleName', sort: 1 },
    { label: '数据权限', id: 'showDataTypeName', sort: 2 },
    { label: '创建时间', id: 'creationTime', sort: 3 },
    { label: '最后修改时间', id: 'updationTime', sort: 4 },
    { label: '操作', id: 'operate', sort: 5 }
  ],
  data: [],
  selection: []
});
let status = reactive({
  show: false,
  editData: {}
});
const pageQuery = async () => {
  await store.dispatch('getRoles');
  table.data = store.state.roles.map(r => {
    return {
      ...r,
      ...{
        showDataTypeName: { 1: '个人', 2: '下属部门', 3: '全公司' }[r.showDataType],
        creationTime: day(r.creationTime).format('YYYY-MM-DD HH:mm:ss'),
        updationTime: day(r.updationTime).format('YYYY-MM-DD HH:mm:ss')
      }
    };
  });
};
pageQuery();

const onAdd = () => {
  status.editData = {};
  status.show = true;
};
const onEdit = val => {
  status.editData = val;
  status.show = true;
};
const onDel = async val => {
  console.log('1', 1);

  await post('Role/BulkDelete', { ids: val });
  $message.success('删除成功');
  pageQuery();
};
// 创建 保存 回调
const onSaveCallback = () => {
  pageQuery();
  status.show = false;
  // 如果修改的是当前的角色，就重新调用一下 公共接口
  if (status.editData.id === store.state.commons.roleId) store.dispatch('getInit');
};
const onTableChange = val => {
  table.selection = val;
};
</script>

<style lang="scss" scoped>
.role {
  padding: 10px;
  background-color: #fff;
}
.header-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>
